<template>
  <el-dialog title="编辑任务" :close-on-click-modal="false" :visible.sync="visible" size="small" @close="close">
    <el-form :model="taskForm" :rules="rules" ref="taskForm">
      <el-form-item label="任务名称：" :label-width="formLabelWidth" prop="dtlJobName" required>
        <el-input v-model="taskForm.dtlJobName" class="w200"/> 名称必须唯一
      </el-form-item>
      <el-form-item label="描述：" :label-width="formLabelWidth">
        <el-input v-model="taskForm.dtlDescription"/>
      </el-form-item>
      <el-form-item label="有效期：" :label-width="formLabelWidth" required prop="trigRange">
        <el-date-picker
          v-model="taskForm.trigRange"
          type="daterange" format="yyyy-MM-dd"
          placeholder="选择日期范围">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="Cron表达式：" :label-width="formLabelWidth" prop="cronCronExpression" required>
        <el-input v-model="taskForm.cronCronExpression" class="w200"/>
        <abbr title="Cron表达式范例

每隔5秒执行一次：*/5 * * * * ?

每隔1分钟执行一次：0 */1 * * * ?

每天23点执行一次：0 0 23 * * ?

每天凌晨1点执行一次：0 0 1 * * ?

每月1号凌晨1点执行一次：0 0 1 1 * ?

每月最后一天23点执行一次：0 0 23 L * ?

每周星期天凌晨1点实行一次：0 0 1 ? * L

在26分、29分、33分执行一次：0 26,29,33 * * * ?

每天的0点、13点、18点、21点都执行一次：0 0 0,13,18,21 * * ?

每隔5分钟执行一次：0 0/5 * * * ?">?</abbr>
      </el-form-item>
      <el-form-item label="调度服务名：" :label-width="formLabelWidth" prop="jobDataMap.serviceName" required>
        <el-input v-model="taskForm.jobDataMap.serviceName" class="w200"/> (spring bean名称)
      </el-form-item>
      <el-form-item label="调度方法名：" :label-width="formLabelWidth" prop="jobDataMap.method" required>
        <el-input v-model="taskForm.jobDataMap.method" class="w200"/> (该方法的参数必须为Map或无参数)
      </el-form-item>
      <el-form-item label="日志记录方式：" :label-width="formLabelWidth">
        <el-select v-model="taskForm.jobDataMap.insertQuartzLog"  placeholder="请选择">
          <el-option label="全部记录" value="true"/>
          <el-option label="仅记录异常" value="false"/>
        </el-select>
      </el-form-item>
      <el-form-item label="参数：" :label-width="formLabelWidth">
        <el-button type="info" @click="addParam">新增参数</el-button>

        <template v-for="(prm, idx) in taskForm.params">
          <el-row class="mb5" :key="idx">
            <el-col :span="10">
              <el-form-item :prop="'params[' + idx + '].paramKey'" :rules="rules.notEmpty">
                <el-input v-model="prm.paramKey" placeholder="参数名"/>
              </el-form-item>
            </el-col>
            <el-col :span="10" >
              <el-form-item :prop="'params[' + idx + '].paramValue'" :rules="rules.notEmpty">
                <el-input v-model="prm.paramValue" placeholder="参数值"/>
              </el-form-item>
            </el-col>
            <el-col :span="2">
              <el-button type="danger" @click="delParam(idx)">删除</el-button>
            </el-col>
          </el-row>
        </template>

        <!--<el-table :data="taskForm.params" stripe>
          <el-table-column label="参数名" width="200">
            <template>
              <el-input v-model="paramKey" type="text"></el-input>
            </template>

          </el-table-column>
          <el-table-column label="参数值" width="200">
            <template >
              <el-input v-model="paramValue"  type="text"></el-input>
            </template>

          </el-table-column>
          <el-table-column
            label="操作"
            min-width="100">
            <template>
                <el-button type="danger" @click="delParam(index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>-->

      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <c-button type="primary" @click="submitForm">确 定</c-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  props: {
    data: {
      type: Object
    }
  },
  data () {
    let taskForm
    if (this.data.detail != null && this.data.detail.dtlJobName !== null) {
      taskForm = {
        dtlJobName: this.data.detail.dtlJobName,
        dtlJobGroup: '',
        dtlDescription: this.data.detail.dtlDescription,
        trigRange: [this.data.detail.trigStartTimeStr, this.data.detail.trigEndTimeStr],
        trigStartTimeStr: this.data.detail.trigStartTimeStr,
        trigEndTimeStr: this.data.detail.trigEndTimeStr,
        cronCronExpression: this.data.detail.cronCronExpression,
        jobDataMap: {
          serviceName: this.data.detail.jobDataMap.serviceName,
          method: this.data.detail.jobDataMap.method,
          insertQuartzLog: this.data.detail.jobDataMap.insertQuartzLog
        },
        params: []
      }
      // 把jobDataMap里的参数变成params
      for (let prop of Object.keys(this.data.detail.jobDataMap)) {
        if (prop !== 'serviceName' && prop !== 'method' && prop !== 'insertQuartzLog') {
          taskForm.params.push({
            paramKey: prop,
            paramValue: this.data.detail.jobDataMap[prop]
          })
        }
      }
    } else {
      taskForm = {
        dtlJobName: '',
        dtlJobGroup: '',
        dtlDescription: '',
        trigRange: '',
        trigStartTimeStr: '',
        trigEndTimeStr: '',
        cronCronExpression: '',
        jobDataMap: {
          serviceName: '',
          method: '',
          insertQuartzLog: 'true'
        },
        params: []
      }
    }
    return {
      formLabelWidth: '120px',
      visible: true,
      deptOptions: [],
      taskForm: taskForm,
      isDisabled: this.data.isDisabled,
      title: '编辑任务',
      rules: {
        dtlJobName: this.$checkRules.taskName,
        description: [
          ...this.$checkRules.description
        ],
        trigRange: [
          ...this.$checkRules.dateRange
        ],
        cronCronExpression: [
          ...this.$checkRules.cronExpression
        ],
        'jobDataMap.serviceName': [
          ...this.$checkRules.serviceName
        ],
        'jobDataMap.method': [
          ...this.$checkRules.method
        ],
        notEmpty: [
          ...this.$checkRules.notEmpty
        ]
      }
    }
  },
  created () {
    //      this.$service.system.queryDeptList().then(response => {
    //        this.deptOptions = response.data
    //        this.deptForm.deptId = this.data.deptId
    //        this.deptForm.parentId = this.data.showId
    //        this.deptForm.deptName = this.data.deptName
    //      })
  },
  methods: {
    makeRow (index) {
      return {
        index: index,
        paramKey: '',
        paramValue: ''
      }
    },
    addParam () {
      this.taskForm.params.push(this.makeRow(this.taskForm.params.length + 1))
    },
    delParam (index) {
      //        window.console.log('index', index)
      this.taskForm.params.splice(index, 1)
      //        this.taskForm.params.splice(this.taskForm.params.findIndex(item => item.index === index), 1)
    },
    // 固定写法，每次加载都需要重置form
    close () {
      this.$emit('close')
    },
    submitForm (btn) {
      this.$refs.taskForm.validate((valid) => {
        if (valid) {
          this.taskForm.trigStartTimeStr = this.$dateUtils.getFormatDate(this.taskForm.trigRange[0], 'yyyy-MM-dd')
          this.taskForm.trigEndTimeStr = this.$dateUtils.getFormatDate(this.taskForm.trigRange[1], 'yyyy-MM-dd')
          this.$service.system.saveQuartzTask(this.taskForm).then(() => {
            this.visible = false
            this.$emit('ok')
          }).finally(() => {
            btn.isLoading(false)
          })
        } else {
          btn.isLoading(false)
        }
      })
    }
  }
}
</script>

<style>
.w200{width:200px}
  .mb5 { margin-bottom: 5px;}
</style>
